<!DOCTYPE html>
<!--<html>-->
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>笔记管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="/js/jquery.min.js"></script>
		<script type="text/javascript" src="/layui.all.js"></script>
		<link rel="stylesheet" href="/css/layui.css" />
		<link href="/css/Global.css" rel="stylesheet" type="text/css" media="all" />
		<style>
			.font{
				font-size: 14px
			}
		</style>
	</head>

	<body style="">
		<div class="layui-layout" style="">

			<div class="layui-side layui-bg-black" style="overflow-x: visible;">

				<div th:include="/common/common::header"></div>

				<div class="layui-side-scroll">
					<ul class="layui-nav layui-nav-tree site-demo-nav">
						<li class="layui-nav-item ">
							<a class="layui-icon layui-icon-home"  href="/zhl/index" style="font-size: 14px">&nbsp;首页</a>
						</li>

						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-group" href="/zhl/user" style="font-size: 14px">&nbsp;用户管理</a>
						</li>
						<li class="layui-nav-item  layui-this">
							<a class="layui-icon layui-icon-read" href="/zhl/article" style="font-size: 14px">&nbsp;笔记管理</a>
						</li>
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-headset" style="font-size: 14px" href="/zhl/music">&nbsp;音乐管理</a>
						</li>
						<li class="layui-nav-item" style="height: 30px; text-align: center"></li>
						<span class="layui-nav-bar" style="top: 67.5px; height: 0px; opacity: 0;"></span>
					</ul>

				</div>
			</div>
			
			<div class="layui-body site-demo" >
				<div class="layui-layout layui-layout-admin">
					<div class="layui-header">
						<ul class="layui-nav layui-layout-left">
							<li class="layui-nav-item">
								<a href="hard.html"><i class="layui-icon layui-icon-chart-screen layui-ico"></i>用户硬件信息</a>
							</li>
							<li class="layui-nav-item">
								<a href="user.html"><i class="layui-icon layui-icon-group layui-ico"></i>第三方登陆</a>
							</li>
						</ul>
						<ul class="layui-nav layui-layout-right">
							<li class="layui-nav-item">
								<a href="javascript:;">
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<i class="layui-icon layui-icon-set-fill layui-ico"></i>
								</a>
								<dl class="layui-nav-child">
									<dd><a href="">设置</a></dd>
									<dd><a href="">退出</a></dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
					<div class="con-url articleTable" >
					<fieldset class="layui-elem-field">
						<legend>日记本</legend>
						<div class="layui-field-box clear">
					<a class="layui-btn"  href="/zhl/article_add.html">发表日记</a>
					<button class="layui-btn" data-type="reload" style="float: right;">搜索</button>
							
					<div class="layui-inline" style="float: right;">
						<input class="layui-input" name="id" id="articleTitle" placeholder="请输入标题中的关键词" autocomplete="off">
					</div>


							<form class="layui-form" action="">
								<div class="layui-form-item clear">
									
								</div>
							</form>
						</div>
					</fieldset>
					<table class="layui-hide" id="article" lay-filter="article"></table>
				</div>
				<!--<div class="articleTable" style="margin-top: 11px;margin-left: 12px;">
					<div class="layui-inline">
						<input class="layui-input" name="id" id="articleTitle" placeholder="请输入标题中的关键词" autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
					<a class="layui-btn"  href="/layui-admin/article_add.html">添加</a>
				</div>
				<table class="layui-hide" id="article" lay-filter="article"></table>-->
			</div>
			<div class="site-tree-mobile layui-hide">
				<i class="layui-icon">&#xe602;</i>
			</div>
			<div class="site-mobile-shade"></div>
			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-xs" href="/zhl/article_edit.html?id={{d.id}}">查看</a>
				<a class="layui-btn layui-btn-xs" href="/zhl/article_edit.html?id={{d.id}}">编辑</a>
				<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
			</script>
			<script type="text/html" id="checkPublish">
				<input type="checkbox" name="close" lay-skin="switch" value="{{d.id}}" lay-text="发表|保存" class="publish" lay-filter="idPublish" {{ d.publish==0 ? 'checked' : '保存' }}>
			</script>
			<script type="text/html" id="articleType">
				{{d.articleType==1? '<span>技术分享</span>':d.articleType==2?'生活点滴':'更新公告'}}
			</script>
			<script>
				layui.use('table', function() {
					var table = layui.table,
						form = layui.form;
					table.render({
						elem: '#article',
						url: '/data/article.json',
						request: {
							pageName: 'pageNumber' //页码的参数名称，默认：page
								,
							limitName: 'pageSize' //每页数据量的参数名，默认：limit
						},
						response: {
							statusName: 'code' //规定数据状态的字段名称，默认：code
								,
							statusCode: 200 //规定成功的状态码，默认：0
								,
							msgName: 'message' //规定状态信息的字段名称，默认：msg
								,
							countName: 'totalSize' //规定数据总数的字段名称，默认：count
								,
							dataName: 'data' //规定数据列表的字段名称，默认：data
						},
						cellMinWidth: 80,
						page: true,
						id: 'articleReload',
						cols: [
							[{
									type: 'numbers',
									title: '序号',
									width: 80,
									unresize: true,
									sort: true
								}, {
									field: 'title',
									title: '标题',
									width: 100,
									templet: '#usernameTpl'
								}, {
									field: 'articleType',
									title: '类型',
									width: 100,
									templet: '#articleType'
								}, {
									field: 'isOriginal',
									title: '来源',
									width: 80,
									sort: true
								}, {
									field: 'clickRate',
									title: '点击量',
									width: 80,
									unresize: true
								}, {
									field: 'synopsis',
									title: '描述',
									unresize: true
								}, {
									field: 'publish',
									title: '是否发表',
									width: 100,
									templet: '#checkPublish',
									unresize: true
								},
								{
									fixed: 'right',
									title: '操作',
									toolbar: '#barDemo',
									width: 160
								}
							]
						]

					});
					//发表文章
					form.on('switch(idPublish)', function(val) {

							if(this.checked) {
								$.ajax({
										url: "",
										type: "put",
										data: {
											'id':val.value,
											'publish':0
										},
										dataType: "json",
										success: function(result) {
												
										}
									});

						} else {
							$.ajax({
										url: "https://localhost:28080/api/article",
										type: "put",
										data: {
											'id':val.value,
											'publish':1
										},
										dataType: "json",
										success: function(result) {
											
										}
								});
						}

					});

				//删除文章
				table.on('tool(test)', function(obj) {
					var data = obj.data;
					if(obj.event === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del();
							layer.close(index);
						});
					} else if(obj.event === 'edit') {
						layer.prompt({
							formType: 2,
							value: data.email
						}, function(value, index) {
							obj.update({
								email: value
							});
							layer.close(index);
						});
					}
				});
				var $ = layui.$, active = {
					reload: function() {
						var articleTitle = $('#articleTitle');

						//执行重载
						table.reload('articleReload', {
							page: {
								curr: 1 //重新从第 1 页开始
							},
							where: {
								title: articleTitle.val()
							}
						});
					}
				}; $('.articleTable .layui-btn').on('click', function() {
					var type = $(this).data('type');
					active[type] ? active[type].call(this) : '';
				});
				});
			</script>

			<script>
				$(function() {
					$(".site-tree-mobile").click(function() {
						$("body").addClass("site-mobile");
						$(".site-mobile-shade").click(function() {
							$("body").removeClass("site-mobile");
						});
					});
					$(".publish").click(function() {
						alert("sadf")
					})

				});
			</script>
	</body>

</html>